<template>
  <view class="categroy">
    <seachInput />
    <view class="categroy_container">
      <view class="categroy_container_left">
        <view
          class="item"
          v-for="(item, index) in titleList"
          :key="index"
          @click="toggleItem(index)"
        >
          <view class="title" :class="curIndex===index?'active':''">{{item.cat_name}}</view>
        </view>
      </view>
      <view class="categroy_container_right">
        <view class="floor" v-for="(item) in titleList[curIndex].children" :key="item.cat_id">
          <view class="title">/ {{item.cat_name}} /</view>
          <view class="floor_item">
            <view
              class="item"
              v-for="(v) in item.children"
              :key="v.cat_id"
              @click="jumpToProductList(v.cat_id)"
            >
              <view class="item_img">
                <image :src="v.cat_icon" />
              </view>
              <view class="item_pruname">{{v.cat_name}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import seachInput from "../../components/seachInput";
import http from "../utils/http";
export default {
  data() {
    return {
      titleList: [],
      curIndex: 0
    };
  },
  components: {
    seachInput
  },
  onLoad() {
    this.getProduct();
  },
  methods: {
    // 显示左边切换状态
    toggleItem(index) {
      this.curIndex = index;
    },
    //获取商品列表数据
    async getProduct() {
      const data = await http.get("/categories");
      // console.log(data);
      this.titleList = data;
      // console.log(data.cat_name);
    },
    // 给商品添加点击跳转事件
    jumpToProductList(id) {
      uni.navigateTo({
        url: "/pages/goods_list/index?cat_id="+id
      });
    }
  }
};
</script>

<style lang="less" scoped>
.categroy {
  box-sizing: border-box;

  .categroy_container {
    height: calc(100vh - 100rpx);
    display: flex;
    justify-content: center;
    align-items: center;
    .categroy_container_left {
      width: 182rpx;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f3f3f3;
      overflow: scroll;
      .item {
        height: 80rpx;
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10rpx 0;

        .title {
          position: relative;
          height: 60rpx;
          width: 100%;
          color: #585858;
          font-size: 28rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          &.active {
            color: #eb4450;
            border-left: 3px solid #eb4450;
            font-weight: 550;
          }
        }
      }
    }
    .categroy_container_right {
      flex: 1;
      height: 100%;
      background: #fff;
      overflow: scroll;
      .floor {
        .title {
          padding: 15rpx 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .floor_item {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          .item {
            flex: 33% 0;
            display: flex;
            flex-direction: column;
            align-items: center;

            image {
              width: 120rpx;
              height: 120rpx;
            }
            .item_pruname {
              font-size: 21rpx;
            }
          }
        }
      }
    }
  }
}
</style>